<template>
	<view>
		<navBar title="充值"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<view class="banner">
				<view class="banner-tip">总余额</view>
				<view class="banner-price">￥{{data.balance || 0}}元</view>
				<view class="shadow"></view>
			</view>
			<view class="amount-panel">
				<view class="amount-title">充值</view>
				<view class="amount-list">
					<view class="amount-item" :class="{'active':selectItem.id===item.id}"
						v-for="(item,index) in amountList" :key="index" @click="handleSelect(item)">
						<view class="price">{{item.gainMoney || 0}}<text class="small">元</text></view>
						<view class="discount">售价{{item.realMoney || 0}}</view>
					</view>
				</view>
			</view>
			<view class="mode">
				<view class="mode-left">
					<image class="webchat" :src="bg_image.alipay"></image>
					<text class="tip">支付宝支付</text>
				</view>
				<image class="checked" :src="bg_image.iconCheckActive"></image>
			</view>
			<view class="pay-btn" @click="pay">立即充值</view>
		</view>
	</view>
</template>

<script>
	import topup from './js/topup'
	
	export default {
		components: {
		  
		},
		...topup 
	}
</script>

<style lang="less" scoped>
	@import url('./css/topup.less');
</style>